<template>
    <div class="dashboard">
        <!-- 分隔标题 -->
        <h2 class="section-divider">所有服务信息</h2>
        <!-- 所有服务信息 -->
        <section class="all-services">
            <div v-for="(project, index) in projectList" :key="index">
                <h2>{{ project.projectName }}</h2>
                <table class="services-table">
                    <thead>
                        <tr>
                            <th>服务名称</th>
                            <th>分支名称</th>
                            <th>分支说明</th>
                            <th>最新版本</th>
                            <th>修改时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(service, sIndex) in project.serviceInfoList" :key="sIndex" :class="{'even-row': sIndex % 2 === 0, 'odd-row': sIndex % 2 !== 0}">
                            <td>{{ service.serviceName }}</td>
                            <td>
                                <div v-for="(branch, bIndex) in service.branchList" :key="bIndex">
                                    {{ branch.branchName }}
                                </div>
                            </td>
                            <td>
                                <div v-for="(branch, bIndex) in service.branchList" :key="bIndex">
                                    {{ branch.branchExplain }}
                                </div>
                            </td>
                            <td>
                                <div v-for="(branch, bIndex) in service.branchList" :key="bIndex">
                                    {{ branch.lastVersion }}
                                </div>
                            </td>
                            <td>
                                <div v-for="(branch, bIndex) in service.branchList" :key="bIndex">
                                    {{ branch.lastDate }}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 分隔标题 -->
        <h2 class="section-divider">客户部署信息</h2>
        <!-- 所有客户信息 -->
        <section class="customer-deployments">
            <div v-for="(customer, index) in customerList" :key="index">
                <h2>{{ customer.customerName }}</h2>
                <table class="customers-table">
                    <thead>
                        <tr>
                            <th>服务名称</th>
                            <th>使用分支</th>
                            <th>分支说明</th>
                            <th>部署版本</th>
                            <th>部署时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(deploy, dIndex) in customer.deployList" :key="dIndex" :class="{'even-row': dIndex % 2 === 0, 'odd-row': dIndex % 2 !== 0}">
                            <td>{{ deploy.serviceName }}</td>
                            <td>{{ deploy.branchName }}</td>
                            <td>{{ deploy.branchExplain }}</td>
                            <td>{{ deploy.versionNo }}</td>
                            <td>{{ deploy.deployTime }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</template>

<script>
import { getAllServiceList, getAllCustomerList } from "@/api/home";

export default {
    data() {
        return {
            customerList: [],
            projectList: []
        };
    },
    async mounted() {
        try {
            // 调用获取所有服务列表的接口
            const serviceResponse = await getAllServiceList();
            this.projectList = serviceResponse.data.data;
            console.log("projectList", this.projectList);

            // 调用获取所有客户列表的接口
            const customerResponse = await getAllCustomerList();
            this.customerList = customerResponse.data.data;
            console.log("customerList", this.customerList);
        } catch (error) {
            console.error('数据获取失败:', error);
        }
    }
};
</script>

<style scoped>

/* 分隔标题样式 */
.section-divider {
    text-align: center;
    margin: 40px 0;
    font-size: 28px;
    color: 	#3CB371;
    border-bottom: none;
}

.dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

h2 {
    font-size: 24px;
    color: #333;
    margin-top: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

/* 表格样式 */
.services-table,
.customers-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd; /* 表格外边框 */
}

.services-table th,
.customers-table th {
    background: #e3f2fd;
    padding: 12px;
    text-align: left;
    font-size: 16px;
    color: #333;
    border-bottom: 2px solid #007bff; /* 表头下边框 */
}

.services-table td,
.customers-table td {
    padding: 12px;
    text-align: left;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #ddd; /* 单元格下边框 */
}

/* 交替行背景色 */
.even-row {
    background: #f0f8ff; /* 浅蓝色 */
}

.odd-row {
    background: #ffffff; /* 白色 */
}

.services-table tr:hover,
.customers-table tr:hover {
    background: #e0f7fa; /* 鼠标悬停时的背景色 */
}

.services-table td div,
.customers-table td div {
    margin-bottom: 8px;
}

.services-table td div:last-child,
.customers-table td div:last-child {
    margin-bottom: 0;
}
</style>